<template>
<div id="container">
	<div id="d_container">
		<form id="loginForm">
			<div class="login_div">
				<div class="login">
					<div>登录名:&nbsp;&nbsp;</div>
					<div >
						<el-input suffix-icon="el-icon-user"  placeholder="用户名/邮箱" v-model="user.userName" clearable></el-input>
						<span style="color: red;">用户名：张晓明</span>
					</div>
					<div class="Msg" v-text="user.userNameMsg"></div>
				</div>
				<div class="login">
					<div>密码：&nbsp;&nbsp;</div>
					<div>
						<el-input  placeholder="请输入密码" v-model="user.userPwd" show-password></el-input>
						<span style="color: red;">密码：123</span>
					</div>
					<div class="Msg" v-text="user.userPwdMsg"></div>
				</div>
				<div class="login">
					<div>
						<el-button type="success" @click="login()">登录</el-button>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
</template>

<script>
	export default{
		name:'Login',
		data(){
			return{
				user:{
					userName:'',
					userPwd:'',
					token:'',
					userNameMsg:'',
					userPwdMsg:'',
					model:'login'
				},
			}
		},
		methods:{
			login(){
				this.user.userNameMsg = '';
				this.user.userPwdMsg = '';
				this.$forceUpdate();
				if(this.check(this.user.userName)==false){
					this.user.userNameMsg = "包含特殊字符或者敏感语句";
				}
				else if(this.check(this.user.userPwd)==false){
					this.user.userPwdMsg = "包含特殊字符或者敏感语句";
				}
				else{

					if(this.user.userName=='')
					{
						this.user.userNameMsg = "用户名不能为空";
					}
					else if(this.user.userPwd=='')
					{
						this.user.userPwdMsg = "密码不能为空";
					}
					else{
							var date = new Date()
							this.user.token = this.$md5(date.getMonth()+"astrangtoken"+date.getYear()+date.getMinutes());
							this.user.userPwd = this.$md5("wearethe" + this.user.userPwd + "temfromupc");
							this.user.model = 'login';
							var param = this.$qs.stringify(this.user);
							console.log(param);
							this.$axios
							.post("http://49.232.135.8:8088/back/userinfo/isouruser",param)
							.then(rst=>{
								if(rst.data!='')
								{
									if(rst.data.vipStatus==0){
										//console.log(rst);
										localStorage.setItem("aTokenofAStrangeUser",JSON.stringify(rst.data));
										this.user.model = 'check';
										sessionStorage.setItem('aTokenofAStrangeUser',this.$qs.stringify(this.user));
										this.$emit('showLoginDialog',false);
										this.$emit('logined',rst.data.stuName);
									}else{
										this.user.userNameMsg = '';
										this.user.userPwdMsg = '';
									}

								}
								else
								{
									this.user.userNameMsg = "用户名或者密码错误";
									this.user.userPwdMsg = "用户名或者密码错误";
									this.$forceUpdate();
								}
							}).catch(ex=>{
								console.log(ex);
							});
					}
				}
			},
			check(str){
				if(str.indexOf("=")!=-1) return false;
				if(str.indexOf("\'")!=-1) return false;
				if(str.indexOf("\"")!=-1) return false;
				if(str.indexOf(" ")!=-1) return false;
				if(str.indexOf(";")!=-1) return false;
				if(str.indexOf(" or ")!=-1||str.indexOf(" Or ")!=-1||str.indexOf(" oR ")!=-1||str.indexOf(" OR ")!=-1) return false;
				if(str.indexOf("|")!=-1) return false;
				if(str.indexOf("(")!=-1) return false;
				if(str.indexOf(")")!=-1) return false;
				if(str.indexOf("%")!=-1) return false;
				if(str.indexOf("\\")!=-1) return false;
				if(str.indexOf(" true")!=-1) return false;
				return true;
			}

		}
	}
</script>

<style scoped>
	#d_container{
		border-radius: 5px;
		background-color: #b3edb5;
		border-bottom: 5px solid white;
		padding: 10px;
	}
	.login{
		padding-left: 20px;
		margin-left: 40px;
		margin-bottom: 20px;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
	}
	.Msg{
		vertical-align: red;
		color: red;
		font-family: 楷体;
		font-size: 30px;
	}
</style>
